<template>
  <div class="home">
    <div class="top">
      <div class="img">
        <img :src="logo" width="50px" height="100%" alt="" @click="getHome"/>
      </div>
      <van-tabbar
        style="position: static; background-color: transparent"
        inactive-color="#90959b"
        v-model="active"
        route
        active-color="#fb7299"
      >
        <van-tabbar-item
          class="nav"
          v-for="(item, index) in navArr"
          :key="index"
          :to="{name:item.name}"
          >{{ item.title }}
        </van-tabbar-item>
      </van-tabbar>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import logo from "../static/images/logo.webp";
export default {
  name: "Home",
  data() {
    return {
      logo,
      flexd: false,
      active: 0,
      navArr: [
        {
          title: "推荐",
          name: "Recommend",
        },
        {
          title: "排行",
          name: "RanKing",
        },
        {
          title: "分类",
          name: "ClassIfy",
        },
        {
          title: "我的",
          name: "Mine",
        },
      ],
    };
  },
  methods:{
    getHome(){
      this.$router.push({
        path:'/'
      })
    }
  },
};
</script>

<style lang="less" scoped>
.top {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #ccc;
  display: flex;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: white;
  .img {
    overflow: hidden;
    img {
      scale: 1.8;
    }
  }
  .nav {
    flex-grow: 1;
    line-height: 50px;
    text-align: center;
    // color: #90959b;
  }
  .van-tabbar-item--active {
    background-color: transparent;
  }
}
</style>